<template>
  <div class="margin-container-list">
    <div class="flex-between mar-b-10">
      <div>
        <el-select v-model="keywordType" placeholder="请选择" style="width: 120px">
          <el-option
            v-for="item in keywordTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input v-model="keyword" placeholder="请输入搜索内容" class="width-300"></el-input>
        <el-button-group class="mar-l-10">
            <el-button type="primary" @click="handleSearch()">查询</el-button>
            <el-button @click="resetSearch()">重置</el-button>
        </el-button-group>
      </div>
    </div>
    <el-table :data="dataList" v-loading="listLoading" lement-loading-text="加载中">
      <el-table-column label="微客信息" width="450px">
        <template slot-scope="scope">
          <div class="flex v-align-c">
            <img :src="scope.row.avatar" class="user-avatar">
            <div class="font-14 pad-l-10 line-h-14">
              <div><span class="font-color-9">昵称：</span>{{scope.row.nickname}}</div>
              <div><span class="font-color-9">手机：</span>{{scope.row.phone}}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150px" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="selectMember(scope.row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="mar-t-10 mar-b-10 text-align-r">
      <el-pagination background 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange" 
        :current-page="searchListQuery.currentPage" 
        :page-sizes="[5, 10, 50, 100]" 
        :page-size="searchListQuery.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { pagingMemberByEnterpriseId } from '@/api/user/member'
export default {
  props: {
    showFlag: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      keyword: '',
      keywordType: 'nickname',
      keywordTypes: [{
        value: 'nickname',
        label: '微客昵称'
      }, {
        value: 'phone',
        label: '微客手机号'
      }],
      searchListQuery: {
        currentPage: 1,
        size: 10,
        enterpriseId: this.getEnterpriseId(),
        nickname: '',
        phone: ''
      },
      total: null,
      listLoading: false,
      dataList: []
    }
  },
  watch: {
    showFlag(val) {
      if (val) {
        this.dataList = []
        this.resetSearch()
      }
    }
  },
  created() {
    this.initList()
  },
  mounted() {
  },
  methods: {
    // 初始化
    initList() {
      this.listLoading = true
      this.searchListQuery.nickname = ''
      this.searchListQuery.phone = ''
      this.searchListQuery[this.keywordType] = this.keyword
      pagingMemberByEnterpriseId(this.searchListQuery).then(response => {
        this.total = response.data.total
        this.dataList = response.data.records
        this.listLoading = false
      })
    },
    // 查询事件
    handleSearch() {
      this.searchListQuery.currentPage = 1
      this.initList()
    },
    // 重置事件
    resetSearch() {
      this.searchListQuery = {
        currentPage: 1,
        size: 10,
        enterpriseId: this.getEnterpriseId(),
        nickname: '',
        phone: ''
      }
      this.keyword = ''
      this.keywordType = 'nickname'
      this.initList()
    },
    // 选择事件
    selectMember(row) {
      this.$emit('selectEvent', row)
    },
    // 更改当前页面大小
    handleSizeChange(val) {
      this.searchListQuery.size = val
      this.initList()
    },
    // 更改当前页数
    handleCurrentChange(val) {
      this.searchListQuery.currentPage = val
      this.initList()
    }
  }
}
</script>

<style scope>
  .user-avatar {
    width: 59px;
    height: 59px;
    display: block;
    border-radius: 50%;
  }
</style>